<template>
  <div id="yaerOnYearTable">
    <ul class="from_ljgzxq_wrap">
      <li class="from_ljgzxq_li" v-for="(item,index) in tableData" :key="item.plan">
        <div class="from_ljgzxq_span1">{{index+1}}</div>
        <div class="from_ljgzxq_span2">{{item.plan}}</div>
        <countTo class="from_ljgzxq_span3" :startVal="0" :endVal="item.planNumber" separator></countTo>
        <div class="from_ljgzxq_span4">同比</div>
        <div
          class="from_ljgzxq_span5"
          :style="'color:'+(item.lifting ?'rgba(255,73,101,1)':'rgba(68,199,135,1)')"
        >{{item.lifting? "↑":"↓"}}</div>
        <div
          class="from_ljgzxq_span6"
          :style="'color:'+(item.lifting ?'rgba(255,73,101,1)':'rgba(68,199,135,1)')"
        >{{item.liftingNumber}}</div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "yearOnYearTable",
  data() {
    return {};
  },
  props: ["tableData"]
};
</script>

<style lang="scss" scoped>
#yaerOnYearTable {
  margin-top: 1.4rem;
  width: 100%;
  padding: 1.54rem;
  .from_ljgzxq_wrap {
    width: 100%;
    height: 18rem;
    background: rgba(0, 58, 155, 0.5);
    border: 1px solid rgba(4, 160, 254, 0.5);
    box-shadow: inset 0 1px 7px 0 #04a0fe;
    .from_ljgzxq_li {
      display: flex;
      height: 25%;
      width: 100%;
      border-bottom: 1px solid #0363b7;
      line-height: 4.31rem;
      font-family: DINAlternate-Bold;
      .from_ljgzxq_span1 {
        width: 5.38rem;
        text-align: center;
        font-size: 1.38rem;
        color: #fcb33a;
        letter-spacing: 0;
        text-align: center;
      }
      .from_ljgzxq_span2 {
        width: 14.77rem;
        font-size: 1.23rem;
        color: #bed7fa;
        letter-spacing: 0;
      }
      .from_ljgzxq_span3 {
        width: 6rem;
        font-size: 1.23rem;
        text-align: center;
        font-size: 1.84rem;
        color: #ffffff;
        letter-spacing: 0.1rem;
        margin-left: 3.54rem;
      }
      .from_ljgzxq_span4 {
        width: 2.46rem;
        text-align: center;
        color: #bed7fa;
        letter-spacing: 0;
        margin-left: 4.3rem;
        font-size: 1.23rem;
      }
      .from_ljgzxq_span5 {
        margin-left: 0.91rem;
      }
      .from_ljgzxq_span6 {
        width: 3rem;
        margin-left: 1rem;
      }
    }
  }
}
</style>